<template>
	<!-- <uv-scroll-list> -->
		<view class="menu-container">
			<view class="menu-container-scroll">
				<view class="line" v-for="(item, index) in list" :key="index" >
					<view class="item" v-for="(item1, index1) in item.target_detail" :key="index1" :class="[(index1 === item.length - 1) && 'no-margin-right']">
						<image class="image" :src="item1.image_url" mode=""></image>
						<text class="text">{{ item1.title }}  {{ item.length }}</text>
					</view>
				</view>
			</view>
		</view>
	<!-- </uv-scroll-list> -->
	
</template>

<script>
  export default {
    name: 'Banner1bak',
    props: {
		menuBaseUrl:String,
      title: String,
      list: Array,
      colorData: String // yellow/blue/gray/green
    }
  }
</script>

<style >
.menu-container-scroll {
	display: flex;
	flex-direction:column;
	height: 360rpx;
}

.menu-container-scroll .line {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 15px;
/* justify-content: center; */
}

.menu-container-scroll .item {
	/* margin-right: 15px; */
	width: 20%;
	display: flex;
	flex-direction:column;
	align-items: center;
	height: 160rpx;
}
.menu-container-scroll .image {
	width: 61px;
	height: 48px;
}

.menu-container-scroll .text {
	margin-top: 5px;
	color: $uv-content-color;
	font-size: 12px;
	text-align: center;
}

.menu-container-scroll .no-margin-right {
	margin-right: 0;
}
	
</style>
